<template>
    <van-tabbar
        v-model="active"
        route
        fixed
        placeholder
        border
        active-color="#1baeae"
    >
        <van-tabbar-item name="home" icon="wap-home" to="/"
            >首页</van-tabbar-item
        >
        <van-tabbar-item name="category" icon="points" to="/category"
            >分类</van-tabbar-item
        >
        <van-tabbar-item
            name="car"
            icon="shopping-cart"
            to="/car"
            :badge="total || ''"
            >购物车</van-tabbar-item
        >
        <van-tabbar-item name="user" icon="manager" to="/user"
            >我的</van-tabbar-item
        >
    </van-tabbar>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { getCar } from "@/apis/goods";

export default defineComponent({
    setup() {
        const active = ref("home");
        const store = useStore();
        const total = computed(() => (store.getters.cartList || []).length);
        // 获取商品列表
        const getCarList = async () => {
            const { data } = await getCar();
            store.commit("cart/upCartList", data);
        };
        onMounted(() => {
            getCarList();
        });
        return { active, total };
    },
});
</script>

<style scoped></style>
